<!DOCTYPE html>
<head>

    <link rel="stylesheet/less" href="css/style.less">
    <!--Jquery-->
    <script src="lib/jquery-2.0.2.min.js"></script>
    <script type="text/javascript" src="lib/less-1.3.3.min.js"></script>
    <!--Metro UI-->
    <link rel="stylesheet" href="lib/Metro-UI-CSS-master/css/modern.css">
    <link rel="stylesheet" href="lib/Metro-UI-CSS-master/css/modern-responsive.css">
    <link rel="stylesheet" href="lib/Metro-UI-CSS-master/css/site.css">


    <script type="text/javascript" src="lib/Metro-UI-CSS-master/javascript/accordion.js"></script>
    <script type="text/javascript" src="lib/Metro-UI-CSS-master/javascript/buttonset.js"></script>
    <script type="text/javascript" src="lib/Metro-UI-CSS-master/javascript/calendar.js"></script>
    <script type="text/javascript" src="lib/Metro-UI-CSS-master/javascript/carousel.js"></script>
    <script type="text/javascript" src="lib/Metro-UI-CSS-master/javascript/dialog.js"></script>
    <script type="text/javascript" src="lib/Metro-UI-CSS-master/javascript/dropdown.js"></script>
    <script type="text/javascript" src="lib/Metro-UI-CSS-master/javascript/input-control.js"></script>
    <script type="text/javascript" src="lib/Metro-UI-CSS-master/javascript/pagecontrol.js"></script>
    <script type="text/javascript" src="lib/Metro-UI-CSS-master/javascript/rating.js"></script>
    <script type="text/javascript" src="lib/Metro-UI-CSS-master/javascript/slider.js"></script>
    <script type="text/javascript" src="lib/Metro-UI-CSS-master/javascript/start-menu.js"></script>
    <script type="text/javascript" src="lib/Metro-UI-CSS-master/javascript/tile-drag.js"></script>
    <script type="text/javascript" src="lib/Metro-UI-CSS-master/javascript/tile-slider.js"></script>

</head>
<body class="metrouicss">
<div id="topnav" class="">
    <div id="menu">
        <div id="home">
            <i class="place-left icon-home"></i>
            <h2>Your logo</h2>
        </div>
        <div id="">
            <i class="place-left icon-user-3"></i>
            <h2>About</h2>
        </div>
        <div id="">
            <i class="place-left icon-help"></i>
            <h2>FAQ</h2>
        </div>
    </div>
    <div id="resume">
        <img src="">
    </div>
</div>
<div id="wrapper">
    <div id="slide1" class="slide span6">
        <div class="hero-unit">
            <div id="carousel1" class="carousel" data-role="carousel" data-param-duration="300" >
                <div class="slides">

                    <div class="slide" id="slide1" style="left: 0px;">
                        <h2>Create site in Windows 8 style now!</h2>

                        <p class="bg-color-blueDark padding20 fg-color-white">Metro UI CSS allows to create a Web site
                            in the style of
                            Windows 8 quickly and without distractions
                            on routine tasks.</p>

                        <h3>To start: include <strong>modern.css</strong> in head of page</h3>

                        <p class="tertiary-info-text">
                            &lt;link href="modern.css" rel="stylesheet"&gt; and add to metro container <strong>metrouicss</strong>
                            class. Example: &lt;body class="metrouicss"&gt;...&lt;/body&gt;
                        </p>
                    </div>

                    <div class="slide" id="slide2">
                        <h2 class="fg-color-darken">Metro UI CSS</h2>

                        <p class="bg-color-pink padding20 fg-color-white">
                            Developed with the advice of Microsoft to build the user interface and
                            <strong>include:</strong>
                        </p>

                        <div class="span3 place-left">
                            <ul class="unstyled sprite-details">
                                <li><i class="icon-checkmark"></i> General styles</li>
                                <li><i class="icon-checkmark"></i> Grid with Responsive</li>
                                <li><i class="icon-checkmark"></i> Layouts</li>
                            </ul>
                        </div>
                        <div class="span3 place-left">
                            <ul class="unstyled sprite-details">
                                <li><i class="icon-checkmark"></i> Typography</li>
                                <li><i class="icon-checkmark"></i> Many components</li>
                                <li><i class="icon-checkmark"></i> 300+ built in icons</li>
                            </ul>
                        </div>
                    </div>

                    <div class="slide" id="slide3">
                        <h2>Metro UI CSS is a BizSpark Startup</h2>

                        <p class="bg-color-red fg-color-white padding20">
                            Microsoft® BizSpark® is a global program that helps software startups succeed by giving them
                            access to software development tools, connecting them with key industry players, and
                            providing marketing visibility.
                        </p>

                        <p><a href="http://bizspark.com">Join</a> the BizSpark Program now.</p>
                    </div>

                    <div class="slide" id="slide4">
                        <img src="image/Picture1.jpg" class="span5">
                    </div>

                </div>

                <span class="control left"><i class="icon-arrow-left-3"></i></span>
                <span class="control right"><i class="icon-arrow-right-3"></i></span>
            </div>
        </div>
    </div>
    <div id="slide2" class="slide span6">
        <div class="hero-unit">
            <div id="carousel1" class="carousel" data-role="carousel" data-param-duration="300">
                <div class="slides">

                    <div class="slide" id="slide1" style="left: 0px;">
                        <h2>Create site in Windows 8 style now!</h2>

                        <p class="bg-color-blueDark padding20 fg-color-white">Metro UI CSS allows to create a Web site
                            in the style of
                            Windows 8 quickly and without distractions
                            on routine tasks.</p>

                        <h3>To start: include <strong>modern.css</strong> in head of page</h3>

                        <p class="tertiary-info-text">
                            &lt;link href="modern.css" rel="stylesheet"&gt; and add to metro container <strong>metrouicss</strong>
                            class. Example: &lt;body class="metrouicss"&gt;...&lt;/body&gt;
                        </p>
                    </div>

                    <div class="slide" id="slide2" style="display: block; left: -580px;">
                        <h2 class="fg-color-darken">Metro UI CSS</h2>

                        <p class="bg-color-pink padding20 fg-color-white">
                            Developed with the advice of Microsoft to build the user interface and
                            <strong>include:</strong>
                        </p>

                        <div class="span3 place-left">
                            <ul class="unstyled sprite-details">
                                <li><i class="icon-checkmark"></i> General styles</li>
                                <li><i class="icon-checkmark"></i> Grid with Responsive</li>
                                <li><i class="icon-checkmark"></i> Layouts</li>
                            </ul>
                        </div>
                        <div class="span3 place-left">
                            <ul class="unstyled sprite-details">
                                <li><i class="icon-checkmark"></i> Typography</li>
                                <li><i class="icon-checkmark"></i> Many components</li>
                                <li><i class="icon-checkmark"></i> 300+ built in icons</li>
                            </ul>
                        </div>
                    </div>

                    <div class="slide" id="slide3" style="display: block; left: -580px;">
                        <h2>Metro UI CSS is a BizSpark Startup</h2>

                        <p class="bg-color-red fg-color-white padding20">
                            Microsoft® BizSpark® is a global program that helps software startups succeed by giving them
                            access to software development tools, connecting them with key industry players, and
                            providing marketing visibility.
                        </p>

                        <p><a href="http://bizspark.com">Join</a> the BizSpark Program now.</p>
                    </div>
                    <div class="slide" id="slide4">
                        <img src="image/Picture2.png" class="span5">
                    </div>
                </div>

                <span class="control left"><i class="icon-arrow-left-3"></i></span>
                <span class="control right"><i class="icon-arrow-right-3"></i></span>
            </div>
        </div>
    </div>
    <div id="slide3" class="span6 slide">
        <div class="hero-unit">
            <div id="carousel1" class="carousel" data-role="carousel" data-param-duration="300">
                <div class="slides">

                    <div class="slide" id="slide1" style="left: 0px;">
                        <h2>Create site in Windows 8 style now!</h2>

                        <p class="bg-color-blueDark padding20 fg-color-white">Metro UI CSS allows to create a Web site
                            in the style of
                            Windows 8 quickly and without distractions
                            on routine tasks.</p>

                        <h3>To start: include <strong>modern.css</strong> in head of page</h3>

                        <p class="tertiary-info-text">
                            &lt;link href="modern.css" rel="stylesheet"&gt; and add to metro container <strong>metrouicss</strong>
                            class. Example: &lt;body class="metrouicss"&gt;...&lt;/body&gt;
                        </p>
                    </div>

                    <div class="slide" id="slide2" style="display: block; left: -580px;">
                        <h2 class="fg-color-darken">Metro UI CSS</h2>

                        <p class="bg-color-pink padding20 fg-color-white">
                            Developed with the advice of Microsoft to build the user interface and
                            <strong>include:</strong>
                        </p>

                        <div class="span3 place-left">
                            <ul class="unstyled sprite-details">
                                <li><i class="icon-checkmark"></i> General styles</li>
                                <li><i class="icon-checkmark"></i> Grid with Responsive</li>
                                <li><i class="icon-checkmark"></i> Layouts</li>
                            </ul>
                        </div>
                        <div class="span3 place-left">
                            <ul class="unstyled sprite-details">
                                <li><i class="icon-checkmark"></i> Typography</li>
                                <li><i class="icon-checkmark"></i> Many components</li>
                                <li><i class="icon-checkmark"></i> 300+ built in icons</li>
                            </ul>
                        </div>
                    </div>

                    <div class="slide" id="slide3" style="display: block; left: -580px;">
                        <h2>Metro UI CSS is a BizSpark Startup</h2>

                        <p class="bg-color-red fg-color-white padding20">
                            Microsoft® BizSpark® is a global program that helps software startups succeed by giving them
                            access to software development tools, connecting them with key industry players, and
                            providing marketing visibility.
                        </p>

                        <p><a href="http://bizspark.com">Join</a> the BizSpark Program now.</p>
                    </div>
                    <div class="slide" id="slide4">
                        <img src="image/Picture3.jpg" class="span5">
                    </div>
                </div>

                <span class="control left"><i class="icon-arrow-left-3"></i></span>
                <span class="control right"><i class="icon-arrow-right-3"></i></span>
            </div>
        </div>
    </div>
    <div id="slide4" class="span6 slide">
        <div class="hero-unit">
            <div id="carousel1" class="carousel" data-role="carousel" data-param-duration="300">
                <div class="slides">

                    <div class="slide" id="slide1" style="left: 0px;">
                        <h2>Create site in Windows 8 style now!</h2>

                        <p class="bg-color-blueDark padding20 fg-color-white">Metro UI CSS allows to create a Web site
                            in the style of
                            Windows 8 quickly and without distractions
                            on routine tasks.</p>

                        <h3>To start: include <strong>modern.css</strong> in head of page</h3>

                        <p class="tertiary-info-text">
                            &lt;link href="modern.css" rel="stylesheet"&gt; and add to metro container <strong>metrouicss</strong>
                            class. Example: &lt;body class="metrouicss"&gt;...&lt;/body&gt;
                        </p>
                    </div>

                    <div class="slide" id="slide2" style="display: block; left: -580px;">
                        <h2 class="fg-color-darken">Metro UI CSS</h2>

                        <p class="bg-color-pink padding20 fg-color-white">
                            Developed with the advice of Microsoft to build the user interface and
                            <strong>include:</strong>
                        </p>

                        <div class="span3 place-left">
                            <ul class="unstyled sprite-details">
                                <li><i class="icon-checkmark"></i> General styles</li>
                                <li><i class="icon-checkmark"></i> Grid with Responsive</li>
                                <li><i class="icon-checkmark"></i> Layouts</li>
                            </ul>
                        </div>
                        <div class="span3 place-left">
                            <ul class="unstyled sprite-details">
                                <li><i class="icon-checkmark"></i> Typography</li>
                                <li><i class="icon-checkmark"></i> Many components</li>
                                <li><i class="icon-checkmark"></i> 300+ built in icons</li>
                            </ul>
                        </div>
                    </div>

                    <div class="slide" id="slide3" style="display: block; left: -580px;">
                        <h2>Metro UI CSS is a BizSpark Startup</h2>

                        <p class="bg-color-red fg-color-white padding20">
                            Microsoft® BizSpark® is a global program that helps software startups succeed by giving them
                            access to software development tools, connecting them with key industry players, and
                            providing marketing visibility.
                        </p>

                        <p><a href="http://bizspark.com">Join</a> the BizSpark Program now.</p>
                    </div>
                    <div class="slide" id="slide4">
                        <img src="image/Picture4.jpg" class="span5">
                    </div>
                </div>

                <span class="control left"><i class="icon-arrow-left-3"></i></span>
                <span class="control right"><i class="icon-arrow-right-3"></i></span>
            </div>
        </div>
    </div>

    <div id="zululogo">
        <div class="tile double bg-color-green">
            <div class="tile-content">
                <h2>mattberg@live.com</h2>
                <h5>Re: Wedding Annoucement!</h5>
                <p>
                    Congratulations! I'm really excited to celebrate with you all. Thanks for...
                </p>
            </div>
            <div class="brand">
                <div class="badge">12</div>
                <img class="icon" src="images/Mail128.png">
            </div>
        </div>
    </div>

    <div id="bottonnav" class="bg-color-blue">
        <div class="nav-bar-inner padding10">
                <span class="element">
                    2012-2013, Metro UI CSS © by <a class="fg-color-white" href="mailto:sergey@pimenov.com.ua">Sergey
                    Pimenov</a>
                </span>
        </div>
    </div>
</div>
</div>
</div>
</body>
</html>
